<script lang="ts" setup>
/**
 * 用户详情-短租消费-用户调整记录
 */
import { reactive, onActivated } from 'vue'
import {
  queryBikeShortTermOperationTableCol,
  queryBikeShortTermOperationRequestData
} from '@/api/record/types/record'
import { queryBikeShortTermOperation } from '@/api/record'
import { useTable } from '@/hooks/useTable'
import { getToken } from '@/utils/cache/cookies'
import { useRoute } from 'vue-router'
import { useActivated } from '@/hooks/useActivated'
import TimeRentRecordTable from '@/components/table/TimeRentRecordTable.vue'
defineOptions({
  name: 'TimeRentUserRecord'
})
const form = reactive<queryBikeShortTermOperationRequestData>({
  bikeCode: '',
  phone: '',
  orderId: '',
  type: '',
  role: ''
})
const { pagination, data, loading, handleSizeChange, handleCurrentChange, load } =
  useTable<queryBikeShortTermOperationTableCol>(
    queryBikeShortTermOperation,
    getToken() ?? '',
    () => form
  )

const route = useRoute()

onActivated(() => {
  form.bikeCode = (route.query.bikeCode as string) || ''
  form.phone = (route.query.phone as string) || ''
  form.orderId = (route.query.orderId as string) || ''
})
/** 处理是否缓存 */
useActivated(
  form,
  { form },
  [
    { key: 'bikeCode', path: 'form.bikeCode' },
    { key: 'phone', path: 'form.phone' },
    { key: 'orderId', path: 'form.orderId' },
    { key: 'type', path: 'form.type' }
  ],
  load,
  []
)
</script>

<template>
  <div class="xy-container">
    <time-rent-record-table :data="data" :loading="loading" />
    <div flex justify-end mt-20>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        background
        :total="pagination.total"
        layout="total,prev,pager,next,jumper,sizes"
      />
    </div>
  </div>
</template>

<style scoped></style>
